<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 27 13"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><rect y=".983" width="27" height="12" rx="2" fill="#FFB628"/><path d="M3.64 9.892V4.074h2.228c.42 0 .77.066 1.048.199.28.13.49.31.628.537.14.227.21.484.21.772 0 .237-.045.44-.136.608-.09.167-.213.302-.366.406a1.55 1.55 0 0 1-.515.225v.057c.207.011.405.075.594.19.191.114.348.275.469.483.121.208.182.46.182.756 0 .3-.073.572-.219.812a1.488 1.488 0 0 1-.66.566c-.293.138-.662.207-1.107.207H3.641Zm1.055-.88h1.133c.383 0 .659-.074.827-.22a.718.718 0 0 0 .256-.568.87.87 0 0 0-.492-.795 1.209 1.209 0 0 0-.562-.122H4.695V9.01Zm0-2.464h1.042c.182 0 .346-.033.492-.1a.828.828 0 0 0 .344-.286.768.768 0 0 0 .128-.443.722.722 0 0 0-.24-.557c-.156-.146-.39-.219-.7-.219H4.694v1.605Zm4.204 3.344V4.074h3.784v.883h-2.73v1.58h2.534v.883H9.953v1.588h2.753v.884H8.899Zm4.603-4.935v-.883h4.642v.883h-1.798v4.935h-1.045V4.957h-1.799Zm5.581 4.935h-1.125l2.049-5.818h1.3l2.052 5.818h-1.125L20.68 5.267h-.046l-1.55 4.625Zm.037-2.281h3.069v.846H19.12v-.846Z" fill="#fff"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Betaicon extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
